<style lang="scss" scoped>
.title-container {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.main-container {
  margin-bottom: 40px;
  overflow: hidden;
}
.dots {
  width: auto;
  margin-right: 20px;
  .dot {
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    background-color: grey;
    border-radius: 3px;
    cursor: pointer;
  }
  .dot-active {
    background-color: $link-color;
  }
}
.card-list-container {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  transition: all ease-out 0.5s;
  transform: translateX(0);
}

.card-container {
  flex-shrink: 0;
  padding: 10px;
  width: 16.66%;
}

.card-desc {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  font-family: 'PingFang SC';
}
.card-body-container {
  padding: 10px;
  p {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
  }
}
</style>

<template>
  <!-- 列表1 -->
  <div class="main-container">
    <!-- 标题栏 -->
    <el-row :gutter="0" class="title-container">
      <!-- 标题 -->
      <el-col :span="12">
        <h1>{{ props.title }}</h1>
      </el-col>

      <!-- 分页器 -->
      <el-col :span="12" class="title-container">
        <div class="dots">
          <span
            class="dot"
            v-for="item in Math.ceil(img_list.length / 6)"
            :key="item"
            @click="switch_dots($event)"
            :id="item"
            :ref="get_my_dot"
          ></span>
        </div>
        <el-link type="primary" class="link">更多></el-link>
      </el-col>
    </el-row>

    <!-- 卡片列表 -->

    <div class="card-list-container" ref="card_list">
      <!-- 卡片列表的卡片,根据图片数量自动生成 -->
      <div
        class="card-container"
        :span="4"
        v-for="item in img_list"
        :key="item.id"
      >
        <el-card :body-style="{ padding: '0px', boxShadow: 'none' }">
          <div class="card-img">
            <el-image :src="item.url" fit="fill"></el-image>
          </div>
          <div class="card-body-container">
            <p>DJI MAVIC 巅峰之旅</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import request from '../../../../utils/axios';
let card_list = ref();

// 接受父组件传来的请求id
const props = defineProps(['id', 'title']);

// 通过ref获取循环的指示器
let my_dot = ref([]);
function get_my_dot(ele) {
  if (ele) {
    my_dot.value.push(ele);
  }
}

const switch_dots = (ele) => {
  my_dot.value.forEach((item) => {
    item.classList.remove('dot-active');
  });
  ele.target.classList.add('dot-active');

  let index = ele.target.id;
  switch (index) {
    case '1':
      card_list.value.style.transform = 'translateX(0)';
      break;
    case '2':
      card_list.value.style.transform = 'translateX(-100%)';
      break;
    case '3':
      card_list.value.style.transform = 'translateX(-200%)';
      break;
    case '4':
      card_list.value.style.transform = 'translateX(-300%)';
      break;
  }
};

// axios请求图片地址
let img_list = ref([]);

onMounted(async (id) => {
  await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: props.id,
    },
  }).then((res) => {
    img_list.value = res.data.Carousels;
  });
  // 第一步将所有的指示器圆点的第一个设置为active
  const frist_dot = my_dot.value[0];
  frist_dot.classList.add('dot-active');
});
</script>
